<template>
  <view class="send" id="send">
    <u-dropdown
      inactive-color="#000000"
      active-color="#adb838"
      ref="Dropdown"
      :close-on-click-mask="false"
    >
      <u-dropdown-item :title="siteName">
        <view class="slot-content">
          <view class="content-list">
            <view
              v-for="(item, index) in options1"
              :key="index"
              @click="choose(item)"
              :style="{ fontSize: '24rpx' }"
              :class="[siteValue == item.kuaidiId ? 'chooseSty' : '']"
              >{{ item.luaidiName }}</view
            >
          </view>
          <view class="button" @click="changeSite">确定</view>
        </view>
      </u-dropdown-item>

      <u-dropdown-item
        :style="{ backgroundColor: '#FFFFFF' }"
        v-model="orderStatus"
        :title="orderStatusName"
        :options="options2"
        @change="changeSite"
      ></u-dropdown-item>
    </u-dropdown>

    <view class="order-total" v-if="orderInfoList.length != 0"
      >{{ siteName }}总共{{ orderInfoList.length }}个包裹</view
    >
    <view class="send-order" v-if="orderInfoList.length != 0">
      <view
        class="container"
        v-for="(item, index) in orderInfoList"
        :key="index"
      >
        <view>{{ item.userInfo[0] }}</view>
        <view @click="callPhone(item.userInfo[4])">{{ item.userInfo[4] }}</view>
        <view>{{ item.orderInfoBoxcode }}</view>
        <view>{{
          item.orderInfoRemark == "" ? "/" : item.orderInfoRemark
        }}</view>

        <view>{{ item.siteName }}</view>
        <view>
          <view
            class="button"
            style="border-radius: 20rpx"
            v-if="item.boxStatus == 'TRADE_SUCCESS'"
            @click="clickQu(item)"
            >取货</view
          >
          <!-- <view
            class="button peisong"
            style="border-radius: 20rpx"
            v-else-if="item.boxStatus == 'DELIVERYING'"
            @click="peisongClick"
            >配送中</view
          >

          <view
            class="button finish"
            style="border-radius: 20rpx"
            v-else
            @click="finishClick"
            >已完成</view
          > -->
        </view>
      </view>
    </view>
    <view v-else style="margin-top: 100rpx">
      <u-empty text="暂无订单" mode="order"></u-empty>
    </view>

    <u-modal
      v-model="quShow"
      :show-title="false"
      :show-cancel-button="true"
      confirm-text="已确认"
      confirm-color="#adb838"
      cancel-text="再看看"
      @confirm="submitQuCode"
      :title-style="{ color: 'red' }"
      content="确认已取到该包裹，确认之前请核对是否有误"
    ></u-modal>
  </view>
</template>

<script>
const siteList = new Map();
export default {
  data() {
    return {
      siteValue: 1,
      siteName: "", //包裹名称（选中）
      orderStatusName: "", //包裹状态
      peisongShow: false,
      quShow: false,
      orderStatus: "TRADE_SUCCESS",
      quCodeOrderNum: "", //待取货订单号
      options1: [], //快递站点 选择列表
      options2: [
        {
          label: "配送中",
          value: "DELIVERYING",
        },
        {
          label: "待取货",
          value: "TRADE_SUCCESS",
        },
        {
          label: "已完成",
          value: "DELIVERY_FINISH",
        },
      ],

      orderInfoList: [],
    };
  },
  methods: {
    callPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    /**
     * 点击配送中
     */
    peisongClick() {
      this.$u.toast("不允许操作，请到扫码完成订单配送");
    },
    /**
     * 点击已完成
     */
    finishClick() {
      this.$u.toast("该包裹以配送完毕，不可操作");
    },

    /**
     * 选择 快递站点
     */
    choose(item) {
      this.siteValue = item.kuaidiId;
    },

    /**
     * 取货吗 列表
     */
    getOrderInfoList() {
      return new Promise((resolve) => {
        var form = {
          schoolId: this.vuex_userInfo.schoolId,
          kuaidiId: this.siteValue,
          orderInfoStatus: this.orderStatus,
        };
        this.$u.api.boxSendApi(form).then((res) => {
          if (res.orderList.length > 0) {
            this.orderInfoList = [];
            res.orderList.map((v) => {
              this.orderInfoList.push(...v.orderInfoList);
            });

            //然后 注入快递信息通过kuaidiid
            this.orderInfoList.map((v) => {
              v.siteName = siteList.get(v.kuaidiId);
              //拆分名称
              v.userInfo = v.address.split("/");
            });
            // console.log(this.orderInfoList);
          } else {
            this.orderInfoList = res.orderList;
            // console.log(this.orderInfoList);
          }
          //选择快递名称
          this.siteName = siteList.get(this.siteValue);
          //包裹状态
          if (this.orderStatus === "DELIVERYING") {
            this.orderStatusName = "配送中";
          } else if (this.orderStatus === "TRADE_SUCCESS") {
            this.orderStatusName = "待取货";
          } else {
            this.orderStatusName = "已完成";
          }
          resolve();
        });
      });
    },

    /**
     * 获取 快递 列表
     */
    getSiteList() {
      return new Promise((resolve) => {
        this.$u.api
          .getKuaidiBySchoolApi({ schoolId: this.vuex_userInfo.schoolId })
          .then((res) => {
            this.$u.vuex("vuex_kuaidiList", res.kuaidiList);
            this.options1 = res.kuaidiList;
            //默认选择
            this.siteValue = res.kuaidiList[0].kuaidiId;
            this.siteName = res.kuaidiList[0].luaidiName;

            res.kuaidiList.map((v) => {
              siteList.set(v.kuaidiId, v.luaidiName);
            });
            resolve();
          });
      });
    },
    /**
     * 切换站点
     */
    changeSite() {
      this.getOrderInfoList().then(() => {
        this.$refs.Dropdown.close();
      });
    },

    /**
     * 点击配送中的订单 提示不能直接操作
     */
    clickPeisong() {},

    /**
     * 点击待取货
     */
    clickQu(Info) {
      console.log(Info);

      // 拿到包裹订单号
      this.quCodeOrderNum = Info.boxOrderNum;
      this.quShow = true;
    },
    /**
     * 提交 取货
     */
    submitQuCode() {
      var form = {
        boxOrderNum: this.quCodeOrderNum,
        boxStatus: "DELIVERYING", //配送中状态
      };
      this.$u.api.changeOrderInfoStatusApi(form).then((res) => {
        this.getOrderInfoList();
      });
    },
  },
  onLoad(option) {
    this.getSiteList().then(() => {
      return this.getOrderInfoList();
    });
  },
};
</script>

<style scoped lang ='scss' >
.send {
  width: 100vw;
  min-height: 100vh;
  background-color: #eff5f7;
  .button {
    height: 100rpx;
    background-color: #adb838;
    line-height: 100rpx;
    text-align: center;
    color: #ffffff;
    font-size: 32rpx;
  }
  /* 以取货 */
  .peisong {
    background-color: #19be6b;
  }
  .finish {
    background-color: #fa3534;
  }
  .content-list {
    display: grid;
    grid-template-columns: repeat(3, 230rpx);
    /* grid-template-rows: repeat(3, 50rpx); */
    background-color: #ffffff;
    justify-content: space-evenly;
    grid-row-gap: 20rpx;
    padding: 30rpx 0 50rpx 0;
    & > view {
      border-radius: 20rpx;
      border: 1px solid #adb838;
      text-align: center;
      line-height: 50rpx;
      color: #adb838;
    }
    .chooseSty {
      background-color: #adb838;
      color: #ffffff;
    }
  }
  .order-total {
    text-align: center;
    margin: 20rpx;
    height: 50rpx;
    line-height: 50rpx;
    color: #666;
  }
  .send-order {
    padding: 10px;
    .container {
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 10rpx;
      display: grid;
      /* grid-template-rows: repeat(6, 70rpx); */
      grid-template-columns: repeat(2, 50%);
      margin-bottom: 30rpx;
      & > view {
        text-align: center;
        border: 1rpx solid #ebeef5;
        line-height: 70rpx;
        color: #ffffff;
      }
      & > view:nth-child(1) {
        background-color: #ff7900;
        border-top-left-radius: 20rpx;
      }
      & > view:nth-child(2) {
        background-color: #ff7900;
      }
      & > view:nth-child(3) {
        /* background-color: gray; */
        background-color: #ff7900;
        font-weight: bold;
        font-size: 40rpx;
      }
      & > view:nth-child(4) {
        /* background-color: blue; */
        grid-row: 1/5;
        grid-column: 2/3;
        padding: 10rpx;
        text-align: justify;
        line-height: normal;
        color: #82848a;
        border-top-right-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
      }
      & > view:nth-child(5) {
        background-color: #ed3f14;
        border-bottom-left-radius: 20rpx;
      }
      & > view:nth-child(6) {
        margin-top: 10rpx;
        grid-column: 1/3;
        border: none;
        margin-top: 30rpx;
      }
    }
  }
}
</style>
